<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #chart {
        border: 1px solid black;
      }
    </style>
    <!-- 引入 ECharts 库 -->
    <script src="./assets/echarts/echarts.js"></script>
    <script>
      // console.log(echarts);

      // 页面加载完成
      window.onload = function () {
        // 初始化 ECharts 实例
        // echarts.init( DOM对象 );
        let boxDom = document.querySelector("#chart");
        console.log(boxDom);
        let chart = echarts.init(boxDom);

        // 配置图表选项（`option`）
        // chart.setOption(option);
        //    option 图标配置对象，详见 https://echarts.apache.org/zh/option.html

        const option = {
          // 标题
          title: {
            // 标题内容
            text: "我的第一个 ECharts 图表11111",
          },
          // 悬浮提示框
          tooltip: {
            // 提示框选中方向 => 轴
            trigger: "axis",
            // 提示框的触发效果
            axisPointer: {
              // 'line' 直线指示器
              // 'shadow' 阴影指示器
              // 'none' 无指示器
              // 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
              type: "cross",
            },
          },

          // x轴和y轴配置，只对直角坐标图形有效

          // // x轴坐标配置
          // xAxis: {
          //   // 数据的分类展示 => 提供分类的名字 data
          //   type: "category",
          //   // 分类的名字
          //   data: ["苹果", "香蕉", "橙子", "西瓜"],
          // },
          // // y轴坐标配置
          // yAxis: {
          //   // 数值
          //   type: "value",
          // },

          xAxis: {
            type: "value",
          },
          yAxis: {
            // 数据的分类展示 => 提供分类的名字 data
            type: "category",
            // 分类的名字
            data: ["苹果", "香蕉", "橙子", "西瓜"],
          },

          // 数据系列
          series: [
            // 第一组数据
            {
              // 数据
              data: [80, 90, 70, 100],
              type: "bar", // 'bar' 表示柱状图，也可改为 'line'（折线图）
            },
            // 第二组数据
            {
              data: [34, 56, 27],
              type: "bar", // 'bar' 表示柱状图，也可改为 'line'（折线图）
            },
          ],
        };
        chart.setOption(option);
      };
    </script>
  </head>
  <body>
    <!-- 
    准备一个容器（用于显示图表）
    必须设置宽高，否则图表无法显示
    -->
    <div id="chart" style="width: 600px; height: 400px"></div>
  </body>
</html>
